<template>
  <view class="court-detail-container">
    <!-- 页面头部 -->
    <view class="header">
      
      <!-- 球馆信息 -->
      <view class="venue-info">
        <view class="venue-logo">
          <text class="logo-text">{{ venueLogo }}</text>
        </view>
        <view class="venue-details">
          <text class="venue-name">{{ venueName }}</text>
          <text class="venue-hours">{{ venueHours }}</text>
        </view>
      </view>
    </view>
    
    <!-- 联系信息卡片 -->
    <view class="contact-card">
      <view class="contact-info">
        <!-- <text class="phone-number">{{ venuePhone }}</text> -->
        <text class="venue-address">{{ venueAddress }}</text>
        <text class="distance">距离{{ venueDistance }}km</text>
      </view>
      <view class="action-buttons">
        <!-- <view class="action-btn" @click="makePhoneCall">
          <image src="/static/home/phone.svg" class="phone-icon"></image>
        </view> -->
        <view class="action-btn" @click="openNavigation">
           <image class="action-icon" src="/static/home/导航.png" mode="aspectFit" />
          </view>
      </view>
    </view>
    
    <!-- 场馆照片 -->
    <view class="venue-photos">
      <text class="section-title">场馆照片</text>
      <view class="photo-container" v-if="venueImages && venueImages.length > 0">
        <image 
          v-for="(image, index) in venueImages" 
          :key="index"
          class="venue-image" 
          :src="image" 
          mode="aspectFill"
          @click="previewImage(image)"
        />
      </view>
      <view class="no-photos" v-else>
        <text>暂无场馆照片</text>
      </view>
    </view>
    <!-- 场地信息模块 -->
    <view class="court-info-section">
     
      
      
      <!-- 时间段网格 -->
      <view class="time-grid">
        <view class="time-header">
          <text class="status-text">场地详情</text>
        </view>
        
        <!-- 表格头部 -->
        <view class="table-header">
          <view class="time-column-header">时间</view>
          <scroll-view 
            scroll-x="true" 
            class="courts-header-scroll"
            :scroll-left="headerScrollLeft"
            @scroll="onHeaderScroll"
          >
            <view class="courts-header">
              <view 
                v-for="(court, courtIndex) in courtList" 
                :key="courtIndex"
                class="court-header-item"
              >
                <text class="court-header-name">{{ court.name }}</text>
              </view>
              <view class="court-header-item" style="background-color: #fff;border: 0;">
              </view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 表格主体 -->
        <view class="table-body">
          <!-- 固定的时间列 -->
          <view class="time-column">
            <view 
              v-for="(slot, index) in timeSlots" 
              :key="index"
              class="time-cell"
            >
              <text class="time-label">{{ slot.label.split('-')[0] }}</text>
            </view>
            
          </view>
          
          <!-- 可滚动的预订情况区域 -->
          <scroll-view 
            scroll-x="true" 
            class="booking-scroll"
            :scroll-left="bodyScrollLeft"
            @scroll="onBodyScroll"
          >
            <view class="booking-grid">
              <view 
                v-for="(court, courtIndex) in courtList" 
                :key="courtIndex"
                class="court-column"
              >
                <view 
                  v-for="(slot, slotIndex) in timeSlots" 
                  :key="slotIndex"
                  class="booking-cell"
                  :class="{ 
                    available: court.slots[slotIndex] && court.slots[slotIndex].available,
                    booked: court.slots[slotIndex] && !court.slots[slotIndex].available 
                  }"
                  @click="goToBooking({})"
                >
                  <text class="price" v-if="court.slots[slotIndex] && court.slots[slotIndex].available">
                    ¥{{ court.slots[slotIndex].price }}
                  </text>
                  <text class="booked-text" v-else-if="court.slots[slotIndex]">
                    已订
                  </text>
                </view>
              </view>
              <view class="court-column"court-column style="background-color: #fff;border: 0;">
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getVenueByDataSource,getVenueAllAddresses } from '../../common/venueConfig.js';

export default {
  data() {
    return {
      dataSource: '',
      venueName: '',
      venueAddress: '',
      venueDistance: '0',
      venuePhone: '',
      venueImages: [],
      timeSlots: [],
      selectedDateIndex: 0,
      selectedCourtIndex: 0,
      availableDates: [],
      courtList: [],
      allVenueList: [],
      headerScrollLeft: 0,
      bodyScrollLeft: 0,
      isScrollingHeader: false,
      isScrollingBody: false
    }
  },
  
  computed: {
    venueLogo() {
      return this.venueName ? this.venueName.charAt(0) : 'L';
    },
    venueHours() {
      if (this.timeSlots && this.timeSlots.length > 0) {
        const firstSlot = this.timeSlots[0].value.split('-')[0];
        const lastSlot = this.timeSlots[this.timeSlots.length - 1].value.split('-')[1];
        return `周一至周日 ${firstSlot}-${lastSlot}`;
      }
      return '周一至周日 06:00-24:00';
    },
    selectedCourt() {
      if (this.courtList && this.courtList.length > 0 && this.selectedCourtIndex < this.courtList.length) {
        return this.courtList[this.selectedCourtIndex];
      }
      return { status: '空闲3h', name: '一号场', description: '(风雨无阻)' };
    }
  },
  
  onLoad(options) {
    // 获取传递的参数
    if (options.dataSource) {
      this.dataSource = decodeURIComponent(options.dataSource);
    }
    if (options.name) {
      this.venueName = decodeURIComponent(options.name);
    }
    if (options.address) {
      this.venueAddress = decodeURIComponent(options.address);
    }
    if (options.distance) {
      this.venueDistance = options.distance;
    }
    
    // 解析allVenueList参数
    if (options.allVenueList) {
      try {
        this.allVenueList = JSON.parse(decodeURIComponent(options.allVenueList));
      } catch (error) {
        console.error('解析allVenueList失败:', error);
        this.allVenueList = [];
      }
    }
    
    // 从配置文件获取详细信息
    this.loadVenueDetails();
  },
  
  mounted() {
    // 初始化时间段和场地数据
    this.timeSlots = this.generateTimeSlots();
    this.availableDates = this.generateDates();
    this.courtList = this.generateCourtList();
  },
  
  methods: {
    generateTimeSlots() {
      const slots = [];
      
      // 统一使用一小时间隔的时间段（从6点到23点）
      for (let hour = 6; hour <= 23; hour++) {
        const startHour = hour.toString().padStart(2, '0');
        const endHour = (hour + 1).toString().padStart(2, '0');
        slots.push({
          label: `${startHour}:00-${endHour}:00`,
          value: `${startHour}:00-${endHour}:00`
        });
      }
      return slots;
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    loadVenueDetails() {
      const venueConfig = getVenueByDataSource(this.dataSource);
      if (venueConfig) {
        this.venuePhone = venueConfig.phone || '暂无电话';
        this.venueImages = venueConfig.images || [];
      }
    },
    
    makePhoneCall() {
      if (this.venuePhone && this.venuePhone !== '暂无电话') {
        uni.makePhoneCall({
          phoneNumber: this.venuePhone,
          success: () => {
            console.log('拨打电话成功');
          },
          fail: (err) => {
            console.error('拨打电话失败', err);
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '暂无电话号码',
          icon: 'none'
        });
      }
    },
    
    openNavigation() {
      // 这里可以调用地图导航功能
      const venueConfig = getVenueByDataSource(this.dataSource);
      if (venueConfig) {
        const allAddresses = getVenueAllAddresses(venueConfig.id);
        
        if (allAddresses.length > 1) {
          // 如果有多个地址，检查当前场的名字是否在include数组内
          let targetAddress = null;
          
          for (let address of allAddresses) {
            if (address.include && address.include.includes(this.venueName)) {
              targetAddress = address;
              break;
            }
          }
          
          if (targetAddress) {
            // 如果找到匹配的地址，直接导航
            this.navigateToAddress(venueConfig, targetAddress);
          } 
        } else {
          // 如果只有一个地址，直接导航
          this.navigateToAddress(venueConfig, allAddresses[0]);
        }
      } else {
        uni.showToast({
          title: '球馆配置信息未找到',
          icon: 'none'
        });
      }
    },
    navigateToAddress(venueConfig, address) {
      uni.openLocation({
        latitude: address.latitude,
        longitude: address.longitude,
        name: venueConfig.name,
        address: address.address,
        success: function() {
          console.log('打开导航成功');
        },
        fail: function(err) {
          console.error('打开导航失败', err);
          uni.showToast({
            title: '导航功能暂不可用',
            icon: 'none'
          });
        }
      });
    },
    previewImage(currentImage) {
      uni.previewImage({
        urls: this.venueImages,
        current: currentImage
      });
    },
    
    generateDates() {
      const dates = [];
      const today = new Date();
      const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
      
      for (let i = 0; i < 4; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        
        let label = '';
        if (i === 0) {
          label = '今天';
        } else if (i === 1) {
          label = '明天';
        } else {
          label = weekDays[date.getDay()];
        }
        
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        
        dates.push({
          label: label,
          value: `${month}/${day}`,
          date: date
        });
      }
      
      return dates;
    },
    
    generateCourtList() {
      let courts = [];
      
      // 如果有真实的场馆数据，使用真实数据
      if (this.allVenueList && this.allVenueList.length > 0) {
        // 找到当前场馆的数据
        const currentVenue = this.allVenueList.find(venue => 
          venue.name === this.venueName || 
          venue.address === this.venueAddress
        );
        
        if (currentVenue && currentVenue.courts && currentVenue.courts.length > 0) {
            
          courts = currentVenue.courts.map(court => ({
            name: court.name || court.courtName || '未知场地',
            description: court.description || '(标准场地)',
            status: court.status || '空闲',
            slots: this.generateCourtSlots(court)
          }));
        }
      }
      
      // 如果没有真实数据，使用默认数据
      if (courts.length === 0) {
        courts = [
          { name: '一号场', description: '(风雨无阻)', status: '空闲3h' },
          { name: '二号场', description: '(配套齐全)', status: '空闲2h' },
          { name: '三号场', description: '(室内场地)', status: '空闲4h' },
          { name: '四号场', description: '(标准场地)', status: '空闲1h' }
        ];
        
        // 为每个场地生成时间段数据
        courts.forEach(court => {
          court.slots = this.generateCourtSlots();
        });
      }
      
      return courts;
    },
    
    generateCourtSlots(courtData = null) {
      const slots = [];
      // 固定使用18个时间段（6:00-23:00，每小时一个时间段）
      const timeSlotCount = 18;
      
      // 如果有真实的场地数据且包含timeSlot，使用真实数据
      if (courtData && courtData.timeSlot && courtData.timeSlot.length > 0) {
        // 创建时间段映射，将真实数据映射到18个小时时间段
        const timeSlotMap = new Map();
        
        // 将真实数据按小时分组，并计算一小时价格
        courtData.timeSlot.forEach(timeSlot => {
          if (timeSlot.time) {
            // 提取开始小时和分钟
            const timeMatch = timeSlot.time.match(/(\d{1,2}):(\d{2})/);
            if (timeMatch) {
              const hour = parseInt(timeMatch[1]);
              const minute = parseInt(timeMatch[2]);
              
              if (hour >= 6 && hour <= 23) {
                const slotIndex = hour - 6; // 6点对应索引0
                
                // 计算时间段长度（支持任意分钟数）
                let duration = 60; // 默认60分钟
                if (timeSlot.time.includes('-')) {
                  const [startTime, endTime] = timeSlot.time.split('-');
                  const startMatch = startTime.match(/(\d{1,2}):(\d{2})/);
                  const endMatch = endTime.match(/(\d{1,2}):(\d{2})/);
                  if (startMatch && endMatch) {
                    const startMinutes = parseInt(startMatch[1]) * 60 + parseInt(startMatch[2]);
                    const endMinutes = parseInt(endMatch[1]) * 60 + parseInt(endMatch[2]);
                    duration = endMinutes - startMinutes;
                  }
                }
                
                // 计算一小时价格（精确整数倍转换）
                let hourlyPrice = timeSlot.price || 0;
                console.log('duration',duration);
                
                if (duration === 30 || duration === 29) {
                  // 30分钟价格直接乘以2
                  hourlyPrice = hourlyPrice * 2;
                }
                // 只支持30分钟和60分钟的精确计算，其他时长保持原价格
                
                // 如果该时间段还没有数据，或者当前时间段可用，则更新
                const existingSlot = timeSlotMap.get(slotIndex);
                if (!existingSlot || timeSlot.isFree === true) {
                  timeSlotMap.set(slotIndex, {
                    ...timeSlot,
                    price: hourlyPrice,
                    originalPrice: timeSlot.price,
                    duration: duration
                  });
                }
              }
            }
          }
        });
        
        // 生成18个时间段的数据
        for (let i = 0; i < timeSlotCount; i++) {
          const timeSlot = timeSlotMap.get(i);
          if (timeSlot) {
            const isAvailable = timeSlot.isFree === true;
            slots.push({
              available: isAvailable,
              price: timeSlot.price || 0
            });
          } else {
            // 如果没有对应的timeSlot数据，使用默认值
            slots.push({
              available: false,
              price: 0
            });
          }
        }
      } else {
        // 回退到默认随机数据（一小时价格）
        const hourlyPrices = [80, 100, 120, 150, 180, 200]; // 一小时价格范围
        for (let i = 0; i < timeSlotCount; i++) {
          const isAvailable = Math.random() > 0.3; // 70%概率可用
          
          // 根据时间段调整价格（高峰期价格更高）
          const hour = i + 6; // 6点开始
          let priceMultiplier = 1;
          
          if (hour >= 18 && hour <= 21) {
            // 晚上6-9点高峰期，价格上浮20%
            priceMultiplier = 1.2;
          } else if (hour >= 9 && hour <= 11) {
            // 上午9-11点次高峰期，价格上浮10%
            priceMultiplier = 1.1;
          } else if (hour >= 14 && hour <= 16) {
            // 下午2-4点次高峰期，价格上浮10%
            priceMultiplier = 1.1;
          }
          
          const basePrice = hourlyPrices[Math.floor(Math.random() * hourlyPrices.length)];
          // 使用精确的整数价格，不进行估算
          let finalPrice = basePrice;
          if (priceMultiplier === 1.2) {
            // 高峰期价格上浮20%，确保是整数
            finalPrice = basePrice + 20;
          } else if (priceMultiplier === 1.1) {
            // 次高峰期价格上浮10%，确保是整数
            finalPrice = basePrice + 10;
          }
          
          slots.push({
            available: isAvailable,
            price: finalPrice
          });
        }
      }
      
      return slots;
    },
    
    selectDate(index) {
      this.selectedDateIndex = index;
      // 重新生成场地数据
      this.courtList = this.generateCourtList();
    },
    
    selectCourt(index) {
      this.selectedCourtIndex = index;
    },
    
    bookSlot(slotIndex, courtIndex) {
      const court = this.courtList[courtIndex];
      const slot = court.slots[slotIndex];
      
      if (slot && slot.available) {
        const timeSlot = this.timeSlots[slotIndex];
        uni.showModal({
          title: '预订确认',
          content: `确定要预订${court.name} ${timeSlot.label} 吗？价格：¥${slot.price}`,
          success: (res) => {
            if (res.confirm) {
              // 这里可以调用预订API
              slot.available = false;
              uni.showToast({
                title: '预订成功',
                icon: 'success'
              });
            }
          }
        });
      } else if (slot && !slot.available) {
        uni.showToast({
          title: '该时段已被预订',
          icon: 'none'
        });
      }
    },
    
    // 表格头部滚动事件处理
    onHeaderScroll(e) {
      if (this.isScrollingBody) return;
      
      this.isScrollingHeader = true;
      this.bodyScrollLeft = e.detail.scrollLeft;
      
      // 延迟重置标志，避免循环触发
      setTimeout(() => {
        this.isScrollingHeader = false;
      }, 100);
    },
    
    // 表格主体滚动事件处理
    onBodyScroll(e) {
      if (this.isScrollingHeader) return;
      
      this.isScrollingBody = true;
      this.headerScrollLeft = e.detail.scrollLeft;
      
      // 延迟重置标志，避免循环触发
      setTimeout(() => {
        this.isScrollingBody = false;
      }, 100);
    },
    
    // 跳转到预订小程序
    goToBooking(venue) {
      console.log('venue', venue || { dataSource: this.dataSource });
      
      // 如果没有传入venue参数，使用当前页面的数据源
      const targetVenue = { dataSource: this.dataSource };
      
      // 格式化日期函数（去掉年份，格式化为月-日，不添加前导零）
      const formatDateWithoutYear = (dateStr) => {
        const date = new Date(dateStr);
        const month = (date.getMonth() + 1).toString();
        const day = date.getDate().toString();
        return `${month}-${day}`;
      };
      
      // 根据dataSource判断是否跳转到其他小程序
      if (targetVenue.dataSource === '库卡网球') {
        // 跳转到库卡俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wxcd599231d6596bf3',
          path: 'mpxPackages/sport/pages/venue-booking', // 可以指定跳转的页面路径
          extraData: {
            foo: 'bar'
          },
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到库卡俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到库卡俱乐部小程序失败', err);
            // uni.showToast({
            //   title: '跳转失败',
            //   icon: 'none'
            // });
          }
        });
      } else if (targetVenue.dataSource === '向阳彩鸿湾') {
        // 跳转到向阳彩鸿湾小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403170525',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳彩鸿湾小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳彩鸿湾小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '向阳康帝校区') {
        // 跳转到向阳康帝校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403144937',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳康帝校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳康帝校区小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '裕丰围江边网球场') {
        // 跳转到金满贯(中国大酒店)小程序
        uni.navigateToMiniProgram({
          appId: 'wxc7f3f7975f41f64b',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('裕丰围江边网球场小程序成功', res);
          },
          fail: (err) => {
            console.error('裕丰围江边网球场小程序失败', err);
          }
        });
      }else if (targetVenue.dataSource === '向阳雅园校区') {
        // 跳转到向阳雅园校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403150429',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳雅园校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳雅园校区小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '向阳33小镇校区') {
        // 跳转到向阳33小镇校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403143353',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳33小镇校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳33小镇校区小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '向阳星河城校区') {
        // 跳转到向阳星河城校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403102307',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳星河城校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳星河城校区小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '向阳振兴城校区') {
        // 跳转到向阳振兴城校区小程序
        uni.navigateToMiniProgram({
          appId: 'wx080bd287ac7c0a2d',
          path: 'pages/detail/detail?id=403160622',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到向阳振兴城校区小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到向阳振兴城校区小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '拓德网球俱乐部') {
        // 跳转到拓德网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wx7cb33b5481dbfde4',
          path: 'pages/detail/detail?id=2112235080',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到拓德网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到拓德网球俱乐部小程序失败', err);
          }
        });
      }else if (targetVenue.dataSource === '爱动金丰网球俱乐部') {
        // 跳转到爱动金丰网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wxbb9d5b3237778386',
          path: 'mpxPackages/sport/pages/venue-booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到爱动金丰网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到爱动金丰网球俱乐部小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '卓乐网球') {
        // 跳转到爱动金丰网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wx92d22e775454c87f',
          path: 'subPages/education/pages/venue/booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到卓乐网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到卓乐网球俱乐部小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '爱力网球') {
        // 跳转到爱力网球俱乐部小程序
        uni.navigateToMiniProgram({
          appId: 'wx852462a7ef513cbf',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到爱力网球俱乐部小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到爱力网球俱乐部小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '东城体育公园') {
        // 跳转到东城体育公园小程序
        const formattedDate = formatDateWithoutYear(this.selectedDate || new Date().toISOString().split('T')[0]);
        console.log("formattedDate",formattedDate);
        
        uni.navigateToMiniProgram({
          appId: 'wx8d10f95b126926f3',
          
          // path: `pages/subscribeField/subscribeField?gym_id=1&before_date=5&order_sch_num_limit=5&date=${formattedDate}&site_open_end_time=22:00&site_open_start_time=06:00&type=site&site_bill_unit=60`,
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到东城体育公园小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到东城体育公园小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '东莞市体育中心') {
        // 跳转到东莞市体育中心小程序
        const formattedDate = formatDateWithoutYear(this.selectedDate || new Date().toISOString().split('T')[0]);
        uni.navigateToMiniProgram({
          appId: 'wx1580fe42a03dad09',
          // path: `pages/subscribeField/subscribeField?gym_id=5&site_bill_unit=60&type=site&site_open_end_time=22:00&before_date=6&site_open_start_time=06:00&date=${formattedDate}`,
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到东莞市体育中心小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到东莞市体育中心小程序失败', err);
          }
        });

      } else if (targetVenue.dataSource === '3.5+网球（新基）') {
        // 跳转到3.5+网球（新基）小程序
        uni.navigateToMiniProgram({
          appId: 'wxbba37fa369c19fac',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到3.5+网球（新基）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到3.5+网球（新基）小程序失败', err);
          }
        });
      } else if(targetVenue.dataSource === '3.5+网球（金色华庭店）'){
        uni.navigateToMiniProgram({
          appId: 'wxbba37fa369c19fac',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到3.5+网球（新基）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到3.5+网球（新基）小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '松山湖太鲁阁公园') {
        // 跳转到松山湖太鲁阁公园小程序
        const formattedDate = formatDateWithoutYear(this.selectedDate || new Date().toISOString().split('T')[0]);
        console.log("formattedDate", formattedDate);
        
        uni.navigateToMiniProgram({
          appId: 'wx9b73889b14b32f3d',
          path: `pages/subscribeField/subscribeField?leave_check=0&is_ticket=0&order_sites_max=3&gym_id=42&site_bill_unit=60&site_reserve_before_date=3&is_unique=1&order_sch_num_limit=undefined&name=太鲁阁公园体育场-网球场&date=${formattedDate}&plague_pvt=0&site_open_end_time=22:00&site_open_start_time=07:00&ticket_reserve_before_date=3&type=site&is_site=1`,
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到松山湖太鲁阁公园小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到松山湖太鲁阁公园小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '为傲网球（香树店）') {
        // 跳转到为傲网球（香树店）小程序
        uni.navigateToMiniProgram({
          appId: 'wxb220eeda2e7b1a68',
          path: 'main/pages/order/venue?venueTabsType=1&type=1&id=863',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到为傲网球（香树店）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到为傲网球（香树店）小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '3.5+网球（福地）') {
        // 跳转到3.5+网球（福地）小程序
        uni.navigateToMiniProgram({
          appId: 'wx2b9954e1caef716e',
          path: 'booking/pages/space/index?type=1&typeId=463560331927552&shopName=福地室内标准场&shopId=455834640958464',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到3.5+网球（福地）小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到3.5+网球（福地）小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '埗击网球') {
        // 跳转到埗击网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxb82a611c68b78f40',
          path: 'mpxPackages/sport/pages/venue-booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到埗击网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到埗击网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '源峰网球') {
        // 跳转到源峰网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx8a322a3fb5d9ea1c',
          path: 'mpxPackages/sport/pages/venue-booking',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转源峰网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转源峰网球小程序失败', err);
            
          }
        });
      } else if (targetVenue.dataSource === '罗杰网球') {
        // 跳转到罗杰网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx36f7f7e8642b69c7',
          path: 'pages/pagesA/place-reserve/index?id=17&schoolId=326',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转罗杰网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转罗杰网球小程序失败', err);
            
          }
        });
      } else if (targetVenue.dataSource === '月击网球（丰泰校区）' 
      || targetVenue.dataSource === '月击网球（电商园校区）'
      || targetVenue.dataSource === '月击网球（虎门大道校区）'
      || targetVenue.dataSource === '月击网球（城市之光校区）') {
        // 跳转到月击网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxdfc7d821850778b9',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转月击网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转月击网球小程序失败', err);
          
          }
        });
      } else if (targetVenue.dataSource === '晟旋网球(执信店)') {
        // 跳转到晟旋网球(执信店)小程序
        uni.navigateToMiniProgram({
          appId: 'wx9a6f2da8b2838848',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到晟旋网球(执信店)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到晟旋网球(执信店)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '晟旋网球(大壮国际店)') {
        // 跳转到晟旋网球(大壮国际店)小程序
        uni.navigateToMiniProgram({
          appId: 'wx9a6f2da8b2838848',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到晟旋网球(大壮国际店)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到晟旋网球(大壮国际店)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === 'UPTennis三溪SKY店') {
        // 跳转到UPTennis三溪SKY店小程序
        uni.navigateToMiniProgram({
          appId: 'wx6994fbb71debe1de',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到UPTennis三溪SKY店小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到UPTennis三溪SKY店小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '快客网球') {
        // 跳转到快客网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxc9475501ea83ac12',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到快客网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到快客网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(中国大酒店)') {
        // 跳转到金满贯(中国大酒店)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(中国大酒店)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(中国大酒店)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(皇冠假日)') {
        // 跳转到金满贯(皇冠假日)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(皇冠假日)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(皇冠假日)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(海珠香格里拉)') {
        // 跳转到金满贯(海珠香格里拉)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(海珠香格里拉)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(海珠香格里拉)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(华工北)') {
        // 跳转到金满贯(华工北)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(华工北)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(华工北)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(华工西)') {
        // 跳转到金满贯(华工西)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(华工西)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(华工西)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(畔江花园)') {
        // 跳转到金满贯(畔江花园)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(畔江花园)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(畔江花园)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(天河城喜来登)') {
        // 跳转到金满贯(天河城喜来登)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(天河城喜来登)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(天河城喜来登)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(华工大学城)') {
        // 跳转到金满贯(华工大学城)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(华工大学城)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(华工大学城)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(威斯汀)') {
        // 跳转到金满贯(威斯汀)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(威斯汀)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(威斯汀)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(白云)') {
        // 跳转到金满贯(白云)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(白云)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(白云)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(珠江新城)') {
        // 跳转到金满贯(珠江新城)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(珠江新城)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(珠江新城)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(琶洲保利世贸)') {
        // 跳转到金满贯(琶洲保利世贸)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(琶洲保利世贸)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(琶洲保利世贸)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(华美麓湖)') {
        // 跳转到金满贯(华美麓湖)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(华美麓湖)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(华美麓湖)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(华美学校)') {
        // 跳转到金满贯(华美学校)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(华美学校)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(华美学校)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '金满贯(旗峰山)') {
        // 跳转到金满贯(旗峰山)小程序
        uni.navigateToMiniProgram({
          appId: 'wx43d54f8c2495bdfa',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到金满贯(旗峰山)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到金满贯(旗峰山)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '花果山网球馆') {
        // 跳转到花果山网球馆小程序
        uni.navigateToMiniProgram({
          appId: 'wxc7f3f7975f41f64b',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到花果山网球馆小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到花果山网球馆小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '209网球中心') {
        // 跳转到209网球中心小程序
        uni.navigateToMiniProgram({
          appId: 'wxc7f3f7975f41f64b',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到209网球中心小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到209网球中心小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '锦林山庄网球馆') {
        // 跳转到锦林山庄网球馆小程序
        uni.navigateToMiniProgram({
          appId: 'wxc7f3f7975f41f64b',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到锦林山庄网球馆小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到锦林山庄网球馆小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '丰泰花园网球场') {
        // 跳转到丰泰花园网球场小程序
        uni.navigateToMiniProgram({
          appId: 'wxc7f3f7975f41f64b',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到丰泰花园网球场小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到丰泰花园网球场小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '拓普网球(南国花园)') {
        // 跳转到拓普网球(南国花园)小程序
        uni.navigateToMiniProgram({
          appId: 'wx3c3c93c6646e441e',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到拓普网球(南国花园)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到拓普网球(南国花园)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '拓普网球(万胜围)') {
        // 跳转到拓普网球(万胜围)小程序
        uni.navigateToMiniProgram({
          appId: 'wx3c3c93c6646e441e',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到拓普网球(万胜围)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到拓普网球(万胜围)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '拓普网球(新港东)') {
        // 跳转到拓普网球(新港东)小程序
        uni.navigateToMiniProgram({
          appId: 'wx3c3c93c6646e441e',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到拓普网球(新港东)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到拓普网球(新港东)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '拓普网球(白云湖金铂天地)') {
        // 跳转到拓普网球(白云湖金铂天地)小程序
        uni.navigateToMiniProgram({
          appId: 'wx3c3c93c6646e441e',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到拓普网球(白云湖金铂天地)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到拓普网球(白云湖金铂天地)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '健潮网球') {
        // 跳转到健潮网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxb1554a6b6cc70e73',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到健潮网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到健潮网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '青芸网球') {
        // 跳转到青芸网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx5ac7d00aa9fd734e',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到青芸网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到青芸网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '全爱网球(荔湾店)') {
        // 跳转到全爱网球(荔湾店)小程序
        uni.navigateToMiniProgram({
          appId: 'wxa23d17ffa705bd30',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到全爱网球(荔湾店)小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到全爱网球(荔湾店)小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '云堡罗伦斯网球') {
        // 跳转到云堡罗伦斯网球小程序
        uni.navigateToMiniProgram({
          appId: 'wxc4892bb6d243bb7a',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到云堡罗伦斯网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到云堡罗伦斯网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === '瀚为网球') {
        // 跳转到瀚为网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx673161f76dbe64fd',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到瀚为网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到瀚为网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === 'Mteam网球(嘉禾广丰)') {
        // 跳转到Mteam网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx255c5fad9593085d',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到Mteam网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到Mteam网球小程序失败', err);
          }
        });
      } else if (targetVenue.dataSource === 'Mteam网球(黄埔)') {
        // 跳转到Mteam网球小程序
        uni.navigateToMiniProgram({
          appId: 'wx255c5fad9593085d',
          path: '',
          envVersion: 'release',
          success: (res) => {
            console.log('跳转到Mteam网球小程序成功', res);
          },
          fail: (err) => {
            console.error('跳转到Mteam网球小程序失败', err);
          }
        });
      } else {
        // 如果没有对应的小程序，显示提示信息
        uni.showModal({
          title: '提示',
          content: '该场馆暂不支持在线预订，请联系场馆客服',
          showCancel: false,
          confirmText: '知道了'
        });
      }
    }
  }
}
</script>

<style scoped>
.court-detail-container {
  min-height: 100vh;
}

.header {
  padding: 88rpx 30rpx 60rpx;
  color: white;
  background-color: #2eb872;
  padding-bottom: 100rpx;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60rpx;
  margin-top: -66rpx;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
  filter: brightness(0) invert(1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.more-icon {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  align-items: center;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  background: white;
  border-radius: 50%;
}

.share-icon {
  width: 40rpx;
  height: 40rpx;
  filter: brightness(0) invert(1);
}

.venue-info {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.venue-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: #fff;
}

.logo-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.venue-details {
  flex: 1;
}

.venue-name {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.venue-hours {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
}

.contact-card {
  margin: 0 30rpx 40rpx;
  background: white;
  border-radius: 30rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  margin-top: -66rpx;
}

.contact-info {
  flex: 1;
}

.phone-number {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.venue-address {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
  line-height: 1.4;
  margin-right: 50rpx;
}

.distance {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.action-icon {
  width: 40rpx;
  height: 40rpx;
}

.venue-photos {
  margin: 0 30rpx;
  background: white;
  border-radius: 30rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.photo-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.venue-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.no-photos {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 场地信息模块样式 */
.court-info-section {
  margin: 40rpx 30rpx;
  background: white;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

/* 日期选择器样式 */
.date-selector {
  background: #2eb872;
  display: flex;
  padding: 0;
}

.date-item {
  flex: 1;
  padding: 30rpx 20rpx;
  text-align: center;
  color: white;
  position: relative;
}

.date-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.date-item:first-child {
  background: rgba(255, 255, 255, 0.9);
  color: #2eb872;
}

.date-item:first-child .date-label,
.date-item:first-child .date-value {
  color: #2eb872;
}

.date-label {
  display: block;
  font-size: 24rpx;
  margin-bottom: 8rpx;
  opacity: 0.9;
}

.date-value {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
}

/* 场地列表样式 */
.court-list {
  background: #f8f9fa;
  padding: 20rpx 0;
}

.court-scroll {
  white-space: nowrap;
}

.court-item {
  display: inline-block;
  margin: 0 20rpx;
  padding: 20rpx 30rpx;
  background: white;
  border-radius: 20rpx;
  text-align: center;
  min-width: 160rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.court-item.active {
  background: #2eb872;
  color: white;
}

.court-item:first-child {
  margin-left: 30rpx;
}

.court-item:last-child {
  margin-right: 30rpx;
}

.court-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.court-desc {
  display: block;
  font-size: 22rpx;
  opacity: 0.7;
}

.court-item.active .court-name,
.court-item.active .court-desc {
  color: white;
}

/* 时间网格样式 */
.time-grid {
  padding: 30rpx;
}

.time-header {
  margin-bottom: 30rpx;
}

.status-text {
  font-size: 28rpx;
  color: #2eb872;
  font-weight: bold;
}

/* 表格头部样式 */
.table-header {
  display: flex;
  border-bottom: 2rpx solid #e0e0e0;
}

.time-column-header {
  width: 120rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  border-right: 2rpx solid #e0e0e0;
  flex-shrink: 0;
  /* box-sizing: border-box; */
}

.courts-header-scroll {
  flex: 1;
  /* background: #f5f5f5; */
  padding-right: 100rpx;
}

.courts-header {
  display: flex;
}

.court-header-item {
  width: 160rpx;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 2rpx solid #e0e0e0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.court-header-name {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.court-header-desc {
  display: block;
  font-size: 20rpx;
  color: #666;
}

/* 表格主体样式 */
.table-body {
  display: flex;
}

.time-column {
  width: 120rpx;
  border-right: 2rpx solid #e0e0e0;
  flex-shrink: 0;
}

.time-cell {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #e0e0e0;
  background: #f8f9fa;
  box-sizing: border-box;
}

.time-label {
  font-size: 24rpx;
  color: #666;
  font-weight: bold;
}

.booking-scroll {
  flex: 1;
  padding-right: 100rpx;
}

.booking-grid {
  display: flex;
}

.court-column {
  width: 160rpx;
  border-right: 2rpx solid #e0e0e0;
  flex-shrink: 0;
  background: #f5f5f5;
}

.court-column:last-child {
  margin-right: 20rpx;
}

.booking-cell {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #e0e0e0;
  background: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.booking-cell.available {
  background: #f0f9ff;
  border-color: #2eb872;
}

.booking-cell.booked {
  background: #f5f5f5;
}

/* .booking-cell:hover {
  background: #e8f5e8;
} */

.price {
  font-size: 22rpx;
  font-weight: bold;
  color: #2eb872;
}

.booked-text {
  font-size: 20rpx;
  color: #999;
}
</style>